<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            border: 0;
            padding: 0;
            margin: 0;

            box-sizing: border-box;
            word-wrap: break-word;

            background: transparent no-repeat left top;
            outline: none;
        }

        .site-container{
            position: relative;
            overflow: hidden;
        }

        a{
            text-decoration: none;
            color: #ffcc56;
        }

        a:hover,
        a:active,
        a:focus{
            text-decoration: underline;
            color: #ffcc56;
        }

        body{
            font-size: 18px;
            line-height: 28px;
            font-family: 'Muli', sans-serif;
            font-style: normal;
            font-weight: 300;
            color: #4b4848;
        }

        h1, h2, h3, h4{
            font-family: 'Futura';
            font-weight: 500;
            color: #252525;
        }

        h1, h2{
            font-size: 48px;
            line-height: 62px;
            margin-bottom: 25px;
        }

        .wrap{
            padding: 0 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .site-header{
            padding-top: 32px;
            padding-bottom: 27px;
        }




        .site-header-inner > div{
            vertical-align: middle;
            display: table-cell;
        }

        .site-header-left{
            padding-right: 30px;
            min-width: 222px;
            width: 222px;
        }

        .site-header-right{
            text-align: right;
            width: 100%;
        }

        .site-navigation li{
            display: inline-block;
            list-style: none;
        }
        .site-navigation li a{
            display: block;
            padding: 0 5px;
            text-decoration:none ;

            font-family: 'Futura';
            font-weight: 500;
            color: black;
        }
        .site-navigation li a:hover,
        .site-navigation li a:active,
        .site-navigation li a:focus{
            text-decoration: none;
            color: #ffcc56;
        }

        /*有一部分可修改*/
        .page-header.home .wrap{
            padding-top: 112px;
            padding-bottom: 30px;
            position: relative;
        }

        .page-header.home .page-header-inner{
            width: 72.0178%;
            float: left;
        }

        .page-header.home .page-title{
            margin-bottom: 0;

            font-size: 60px;
            line-height: 70px;
        }

        .page-header.home .page-header-text{
            margin-top: 50px;

            font-size: 24px;
            line-height: 30px;
        }

        input[type="button"],
        input[type="submit"]{
            padding: 13px 20px;
            white-space: normal;
            cursor: pointer;

            background-color: #ffcc56;
            border-radius: 3px;

            font-size: 18px;
            line-height: 28px;
            font-family: 'Futura';
            text-align: center;
            font-weight: 500;
            color: #fff;
        }

        input[type="button"]:hover,
        input[type="button"]:active,
        input[type="button"]:focus,
        input[type="submit"]:hover,
        input[type="submit"]:active,
        input[type="submit"]:focus{
            opacity: 0.9;
        }

        input:-ms-input-placeholder { color: #9b9b9b; }
        input::-webkit-input-placeholder { color: #9b9b9b; }
        input:-moz-placeholder { color: #9b9b9b; opacity: 1; }
        input::-moz-placeholder { color: #9b9b9b; opacity: 1; }

        .page-header-thing{
            max-width: 172.53px;
            margin: 50px 0 0;
            box-shadow: 0 2px 14px 0 rgb(0 0 0 / 14%);
            background-color: #fff;
            border-radius: 3px;
        }

        .page-header-moon{
            width: 409px;
            height: 409px;
            margin-right: -139px;
            overflow: hidden;

            position: relative;
            /*something important*/
            top: -350px;
            right: 100px;
            float: right;
        }

        .site-header-inner{
            display: table;
            height: 56px;
            width: 100%;
        }

        .page-header-moon::before{
            width: 407px;
            height: 407px;

            background-color: #ffcc56;
            border-radius: 50%;
            content: "";

            position: absolute;
            left: 1px;
            top: 1px;
        }

        .page-header-moon span{
            width: 100%;
            height: 100%;

            transform: translate(-100%, 0);

            background-color: #fff;
            border-radius: 50%;

            position: absolute;
            left: 0;
            top: 0;
        }

        .page-header.home .scroll-btn{
            padding: 11px 0 11px 65px;
            margin-top: 60px;

            display: inline-block;
            position: relative;
            cursor: pointer;

            font-weight: 400;
            color: #252525;
        }

        .page-header.home .scroll-btn:hover{
            color: #ffcc56;
        }

        .page-header.home .scroll-btn::before{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding-top: 11px;

            /*transform: rotate(90deg);*/

            background-color: #252525;
            box-sizing: border-box;

            text-align: center;
            color: #fff;

            position: absolute;
            left: 0;
            top: 0;
        }

        .page-header.home .icon-arrow::before{
            content: '\2192';
        }

        .page-header.home .scroll-btn:hover::before{
            background-color: #ffcc56;
        }

        .clearfix::after{
            content: "";
            clear: both;
            display: block;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }
    </style>
</head>
<body>
<div class="site-container">
    <div class="site-container-moon"></div>
    <header class="site-header">
        <div class="wrap">
            <div class="site-header-inner">
                <div class="site-header-left">
                    <a href="#">Hello Store</a>
                </div>
                <div class="site-header-right">
                    <nav class="site-navigation">
                        <ul class="level">
                            <li>
                                <a href="signonForm">sign in</a>
                            </li>
                            <li>
                                <a href="help.html">About</a>
                            </li>
                            <li>
                                <a href="registerForm">register</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <main class="site-main">
        <div class="page-header home">
            <div class="wrap clearfix">
                <div class="page-header inner">
                    <h1 class="page-title">Say Hello To Our Store!</h1>
                    <div class="page-header-text">
                        Lead you to new ways of pet shopping
                    </div>
                    <div class="page-header-thing">
                        <div class="top-label">
                            <input type="button" value="Enter Our Store" onclick="enter_click()">
                        </div>
                    </div>
                    <span class="scroll-btn icon-arrow" onclick="inform_click()">
                        click for more
                    </span>
                </div>
                <div class="page-header-moon">
                    <span></span>
                </div>
            </div>
        </div>
    </main>
</div>
<script>
    function enter_click(){
        window.location.href = "main";
    }

    function inform_click(){
        window.location.href = "help.html";
    }
</script>
</body>
</html>